Виджеты. Column Row Container

➡️Скачать презентацию. Flutter Column Row Container
➡️Скачать шпаргалку Виджет Row Column
➡️Скачать шпаргалку Padding SizedBox
➡️Ссылка на репозиторий с кодом этого урока

Создание интерфейса приложения

Давайте разберемся с основами создания пользовательского интерфейса (UI) на Flutter.

Во Flutter всё — Виджет

Виджеты делятся на два типа:

  1. Видимые виджеты
  2. Невидимые виджеты

Видимые виджеты — это элементы, которые пользователь видит на экране и с которыми может взаимодействовать, такие как Text(), ElevatedButton(), FlutterLogo(), AppBar() и многие другие. Они все формируют интерфейс приложения и откликаются на действия пользователя.

Невидимые виджеты помогают структурировать интерфейс и управляют размещением видимых элементов. Примеры — Row(), Column(), Container(), ListView(). Эти виджеты создают макет и определяют, как и где будут отображаться видимые элементы на экране.

Особое внимание стоит уделить виджету Container(), который можно отнести к обеим категориям. По умолчанию он невидим, но его можно настроить, чтобы он стал видимым — например, добавив цвет фона или границы.

Все виджеты во Flutter — это неизменяемые объекты, которые описывают конкретную часть пользовательского интерфейса.

Дерево виджетов

Flutter поддерживает композицию виджетов, что позволяет создавать сложные элементы интерфейса, комбинируя простые виджеты.
При таком подходе получается дерево виджетов (Widget Tree).

Чем сложнее интерфейс, тем глубже и больше становится это дерево, где каждый виджет имеет своего родителя и детей.

Расположение виджетов горизонтально и вертикально

Для этого используется виджет Flex() или, для большего удобства, его наследники, два виджета Row() и Column()

Колонки и Строки

Элементы интерфейса могут располагаться вертикально и горизонтально, для этого соответственно используются виджеты Column() и Row()

В эти виджеты передаётся много элементов, значит принимающий параметр называется теперь children и имеет тип данных List

Row() и Column() по умолчанию не прокручиваются! Для этих целей используются другие виджеты, например ListView()

class HomeWidget extends StatelessWidget {
  const HomeWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image.asset("assets/images/roll.png", width: 150),
          Text("Вкусные Роллы", style: TextStyle(fontSize: 14)),
          ElevatedButton(onPressed: () {}, child: const Text("Купить")),
        ],
      ),
    );
  }
}

Виджет Container

Container это универсальный виджет, который служит для оформления, выравнивания и управления размерами других виджетов. Он позволяет настраивать такие параметры, как отступы, границы, размеры, тени, фон и выравнивание дочерних элементов.

Виджет очень похож на блочный элемент <div> из html

Настроим виджет Container()
Виджет Карточка Товара

  1. Создадим новый виджет для карточки товара с роллами RollCard()
  2. Перенесем из HomeWidget() все виджеты внутри Column() в RollCard( )
  3. Внутри RollCard() обернем Column() в Container( )
  4. Настроим стили Container() через decoration
/// Виджет Карточка товара
/// Товар Роллы содержит картинку, описание и кнопку купить
class RollCard extends StatelessWidget {
  const RollCard({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200, // 👉 Высота контейнера
      padding: const EdgeInsets.all(16), // 👉 Внутренний отступ

      decoration: BoxDecoration(
        color: Colors.white, // 👉 Цвет фона белый
        border: Border.all(color: Colors.black), // 👉 Границы черные
        borderRadius: BorderRadius.circular(16), // 👉 Закругление
      ),

      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Image.asset("assets/images/roll.png", width: 100),
          SizedBox(height: 10),
          Text("Вкусные Роллы", style: TextStyle(fontSize: 14)),
          SizedBox(height: 10),
          ElevatedButton(onPressed: () {}, child: Text("Купить")),
        ],
      ),
    );
  }
}

Рефакторинг
Виджет Scaffold из MyApp перенесём в HomeWidget

 

 

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Hello Flutter App",
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
      ),
      home: HomeWidget(),
    );
  }
}

class HomeWidget extends StatelessWidget {
  const HomeWidget({super.key});

  @override
  Widget build(BuildContext context) {
    // 👉 Scaffold теперь здесь!
    return Scaffold(
      appBar: AppBar(
        centerTitle: true, 
        title: const Text("UI Column Row"),
      ),
      body: Center(
        child: RollCard() // 👉 Передаём виджет с карточкой
      ),
    );
  }
}

Оформление виджета Container через свойство decoration

Внутренние и Внешние отступы padding и margin

Они добавляют эффект внутреннего пространства, что помогает сделать элементы интерфейса более аккуратными и удобными для чтения и взаимодействия.

padding - создает отступы внутри виджета между его границами и содержимым.
margin - создает отступы вокруг виджета, отделяя его от других виджетов.

 

EdgeInsets это специальный класс, который описывает отступы.
Он управляет 4 сторонами: лево, верх, право, низ (left top right bottom)

  • EdgeInsets.all() - для создания одинаковых отступов со всех сторон виджета.

  • EdgeInsets.symmetric(horizontal: 16, vertical: 8) - разные отступы для горизонтальных (лево и право) и вертикальных (верх и низ) сторон.

  • EdgeInsets.only(left: 16, top: 8, right: 12, bottom: 4) - указывает отступы для каждой стороны отдельно.

 

Container сосит из 4 слоёв со своими размерами

1. Cодержимое контейнера (Content)
2. Внутренние отступы (Padding)
3. Границы (Border)
4. Внешние отступы (Margin)

 

 

class HomeWidget extends StatelessWidget {
  const HomeWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Hello Flutter App"),
      ),
      body: Center(
        child: Container(
          decoration: BoxDecoration(color: Colors.blue[100]),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [

              Container(
                decoration: BoxDecoration(
                  color: Colors.green[200], // Зеленый фон 
                  border: Border.all( // Границы контейнера
                    color: Colors.black, // Черный цвет границы
                    width: 5.0, // Ширина границы
                  )
                ),
                width: 200.0, // Ширина контейнера
                height: 200.0, // Высота контейнера
                padding: const EdgeInsets.all(16.0), // Внутренние отступы
                margin: const EdgeInsets.all(32.0), // Внешние отступы
                child: const Text("Container"), // Текст внутри контейнера
              ),

            ],
          ),
        ),
      ),
    );
  }
}

 

Git + GitFlic

Делаем add commit и push

git add .
git commit -m "Изучаем Column Row Container"
git push origin 3.5-Виджеты-Column-Row

Через VSCode нажимаем Publish Branch